<template>
  <div class="IconMask">
    <!--      prescriptionSignature 处方医生-->
    <!--      prescriptionReview 审核医生-->
    <div class="PerMask-com">
      <p style="width: 100%;height: 5px;border-radius: 5px 5px 0 0;background-color: #409EFF;margin: 0"></p>
      <p style="width: 98%;margin: auto;height: 30px"><Icon @click="handledetelis" type="ios-close" style="font-size: 22px;float: right;margin-top: 4px" /></p>
      <div class="com-right" :style="codes">
        <p style="width: 100%;margin: 0;height: 40px;line-height: 50px;color: #242526;font-size: 18px;font-weight: bold;text-align: center">{{dates.clinic.hospitalName}} 处方笺</p>
        <p style="width: 450px;margin: 0 auto;font-size: 14px;line-height: 30px;border-bottom: 1px solid #EAEAEA;">处方编号：{{dates.clinic.rxNumber ? dates.clinic.rxNumber : dates.clinic.rxId}}</p>
        <div class="com-left-two">
          <div style="width: 450px;margin: 0 auto;font-size: 14px;color: #444444;line-height: 30px">
            <p style="margin: 0"><span style="display: inline-block;width: 180px">姓名：{{dates.clinic.memberName ? dates.clinic.memberName : '暂无'}}</span><span style="display: inline-block;width: 180px"> 性别：{{dates.clinic.gender === 1 ? '男' : dates.clinic.gender ===2?'女':'其他'}}</span><span>年龄：{{dates.clinic.age ? dates.clinic.age : '0'}}岁</span></p>
            <p style="margin: 0"><span style="display: inline-block;width: 180px">科室：{{dates.clinic.dept ? dates.clinic.dept : '暂无'}}</span><span style="display: inline-block;width: 265px">开方日期：{{dates.clinic.createtime ? dates.clinic.createtime : '暂无'}}</span></p>
            <p style="margin: 0">诊断结果：{{dates.clinic.assessmentcontent ? dates.clinic.assessmentcontent : '暂无'}}</p>
          </div>
          <div style="margin-top: 10px;padding-bottom: 15px;border-bottom: 1px solid #EAEAEA;">
            <p style="width: 450px;margin: 0 auto;font-size: 17px;font-weight: bold;border-bottom: 1px solid #EAEAEA;">Rp</p>
            <div v-if="dates.rp.length">
              <div v-for="item in dates.rp" :key="item.id" style="width: 440px;margin: 0 auto;color: #242526;font-size: 14px;line-height: 30px;margin-top: 5px">
                <p style="margin: 0;height: 25px;"><span style="display: inline-block;width: 350px">{{ item.itemname }} {{ item.itemspec }}*{{ item.itemdose }}{{ item.itemdoseunit }}</span><span>x{{ item.itemperiod }}</span></p>
                <p style="font-size: 12px;color: #888888;margin: 0;line-height: 20px">用法用量：{{ item.itemroute }}   每次{{ item.itemsingledose }}{{ item.itemsingledoseunit }}   {{ item.itemfrequency }}</p>
              </div>
            </div>
            <div v-else>
              <p style="width: 100%;text-align: center;line-height: 50px;color: #888888;">暂无用药处方</p>
            </div>
          </div>
          <div style="width: 450px;margin: auto;margin-top: 20px;font-size: 14px">
            <p style="height: 50px;margin: 0;line-height: 50px">
              <span style="display: inline-block;width: 55%;position: relative;float: left">医师: <img v-show="imga" style="position: absolute;left: 40px;top: 3px;width: 90px;height: 42px" :src="imga" /> <span v-show="!imga">{{dates.clinic.operator}}</span> </span>
              <span style="display: inline-block;width: 45%;position: relative;float: right">药师: <img v-show="imgb" style="position: absolute;left: 40px;top: 3px;width: 90px;height: 42px" :src="imgb" /> <span v-show="!imgb">{{dates.clinic.prescriptionReviewName}}</span> </span>
            </p>
            <p style="height: 50px;margin: 0;line-height: 50px;position: relative;">核对 / 发药：{{dates.clinic.qdDocname}}</p>
            <p style="margin: 0;line-height: 25px"><span style="display: inline-block;width: 44px;font-size: 14px">注意:</span><span style="font-size: 12px;color: #444444">1.处方三日有效,处方仅限于接诊药店配送，自行下载不具备有处方效力。</span></p>
            <p style="margin: 0;line-height: 25px"><span style="display: inline-block;width: 44px;"></span><span style="font-size: 12px;color: #444444">2.本处方开具前该患者已在医院初步确诊</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IconMask',
  props: {
    dates: Object,
    imga: String,
    imgb: Object,
    status: Number
  },
  methods: {
    handledetelis() {
    	this.$emit('handledetelis')
    }
  }
}
</script>

<style lang="less" scoped>
  .IconMask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1111;
    background-color: rgba(0,0,0,0.2);
    .PerMask-com{
      width: 500px;
      height: 666px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background:rgba(255,255,255,1);
      box-shadow:2px 3px 8px 0px rgba(0, 0, 0, 0.35);
      border-radius:5px;
      .com-right{
        width: 98%;
        height: calc(100% - 45px);
        margin: auto;
        font-size: 14px;
        color: #242526;
        border: 1px solid #EAEAEA;
        .com-left-one{
          width: 100%;
          height: calc(100% - 110px);
          overflow: auto;
          .com-left-zhu{
            width: 440px;
            margin: auto;
            margin-top: 5px;
            .com-left-zhu-tle,
            .com-left-zhu-com{
              width: 100%;
              margin: 0;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }
        .com-left-two{
          width: 100%;
          height: calc(100% - 81px);
          overflow: auto;
        }
        .com-left-one::-webkit-scrollbar,
        .com-left-two::-webkit-scrollbar{
          height: 0px;
          width: 0px;
        }
      }
    }
  }
</style>
